<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/swiper.min.css">

  <title>郑丹京东界面</title>

</head>

<body>
  <header class="app">
    <div>
      <img src="./images/close.png" alt="">
    </div>
    <div>
      <img src="./images/logo.png" alt="">
    </div>
    <div>打开京东，方便又快捷</div>
    <div>立即打开</div>
  </header>
  <div class="daohang">
    <div class="left">
      <span>
        <img src="./images/gang.png" alt="">
      </span>
    </div>
    <div class="sousuo">
      <div class="jd"></div>
      <div class="fangdajing"></div>
    </div>
    <div class="right">登录</div>
  </div>
  <div class="lunbotu">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./upload/轮播图1.dpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./upload/轮播图2.dpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./upload/轮播图3.dpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./upload/轮播图4.dpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="./upload/轮播图5.dpg" alt="">
        </div>
      </div>

      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="gongneng">
    <a href="#">
      <img src="./upload/gongneng1.png" alt="">
      <span>进口超市</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng2.png" alt="">
      <span>充值缴费</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng3.png" alt="">
      <span>9.9元</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng4.png" alt="">
      <span>销售购物 </span>
    </a>
    <a href="#">
      <img src="./upload/gongneng5.png" alt="">
      <span>京东到家</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng6.png" alt="">
      <span>京东饰品</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng7.png" alt="">
      <span>京东出行</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng8.png" alt="">
      <span>京东拍卖</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng9.png" alt="">
      <span>京东超市</span>
    </a>
    <a href="#">
      <img src="./upload/gongneng10.png" alt="">
      <span>数码电器</span>
    </a>

    <!-- 清除浮动 -->
    <p style="clear: both;"></p>
  </div>
  <div class="gongneng2">
    <div>
      <span>正品直邮</span>
      <span>京东日用</span>
      <img src="./upload/书籍1.dpg" alt="">
    </div>
    <div>
      <span>来电好货</span>
      <span>京东手机</span>
      <img src="./upload/书籍2.dpg" alt="">
    </div>
    <div>
      <span>国潮风尚</span>
      <span>京东好鞋</span>
      <img src="./upload/书籍3.dpg" alt="">
    </div>
    <div>
      <span>都是最爱</span>
      <span>京东好物</span>
      <img src="./upload/书籍4.dpg" alt="">
    </div>
    <!-- 清除浮动 -->
    <p style="clear: both;"></p>
  </div>

  <div class="gongneng2">
    <div>
      <span>极简女包</span>
      <span>简洁版型</span>
      <img src="./upload/图1.dpg" alt="">
    </div>
    <div>
      <span>完美纪念</span>
      <span>专属礼物</span>
      <img src="./upload/图2.dpg" alt="">
    </div>
    <div>
      <span>小小少年</span>
      <span>爱心装备</span>
      <img src="./upload/图3.dpg" alt="">
    </div>
    <div>
      <span>程序人猿</span>
      <span>必备装备</span>
      <img src="./upload/图4.dpg" alt="">
    </div>
    <!-- 清除浮动 -->
    <p style="clear: both;"></p>
  </div>

  <div class="gongneng2">
    <div>
      <span>正品直邮</span>
      <span>高考书籍</span>
      <img src="./upload/图5.dpg" alt="">
    </div>
    <div>
      <span>便宜秒杀</span>
      <span>新鲜果蔬</span>
      <img src="./upload/图6.dpg" alt="">
    </div>
    <div>
      <span>正品直邮</span>
      <span>运动必备</span>
      <img src="./upload/图7.dpg" alt="">
    </div>
    <div>
      <span>都是最爱</span>
      <span>京东好物</span>
      <img src="./upload/图8.dpg" alt="">
    </div>
    <!-- 清除浮动 -->
    <p style="clear: both;"></p>
  </div>

  <div class="marginDiv"></div>

  <!--底部-->
  <div class="dibu">
    <a href="#">
      <img src="./upload/dibu1.png" alt="">
    </a>
    <a href="#">
      <img src="./upload/dibu2.png" alt="">
    </a>
    <a href="#">
      <img src="./upload/dibu3.png" alt="">
    </a>
    <a href="#">
      <img src="./upload/dibu4.png" alt="">
    </a>
    <a href="#">
      <img src="./upload/dibu5.png" alt="">
    </a>
  </div>



  <script src="js/swiper.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>

</body>

</html>